<template>
  <div class="user-profil">
    <van-nav-bar title="个人信息" class="page-nav-bar" left-arrow @click-left="$router.back()"> </van-nav-bar>

    <input type="file" hidden ref="file" @change="onfileChange" />
    <van-cell title="头像" @click="$refs.file.click()">
      <van-image class="avatar" round fit="cover" :src="userList.photo" />
    </van-cell>
    <van-cell title="昵称" :value="userList.name" @click="showName = true"></van-cell>
    <van-cell title="性别" :value="userList.gender === 0 ? '男' : '女'" @click="showGener = true"></van-cell>
    <van-cell title="生日" :value="userList.birthday" @click="showbirthday = true"></van-cell>

    <!-- 更新昵称 -->
    <van-popup v-model="showName" position="bottom" :style="{ height: '100%' }">
      <!-- 昵称组件 -->
      <UpdataName v-if="showName" v-model="userList.name" @close="showName = false"></UpdataName>
    </van-popup>

    <!-- 更新性别 -->
    <van-popup v-model="showGener" position="bottom"> <UpdataGener @close="showGener = false" v-model="userList.gender" v-if="showGener"></UpdataGener> </van-popup>

    <!-- 更新生日 -->
    <van-popup v-model="showbirthday" position="bottom">
      <Updatabirthday v-model="userList.birthday" @close="showbirthday = false" v-if="showbirthday"></Updatabirthday>
    </van-popup>

    <!-- 更新头像 -->
    <van-popup v-model="showPhoto" position="bottom" style="height:100%">
      <UpdataPhoto :img="img" @close="showPhoto = false" v-if="showPhoto" @update-photo="userList.photo = $event"></UpdataPhoto>
    </van-popup>
  </div>
</template>

<script>
import { getUsersAPI } from '@/api/User.js'
import UpdataName from './components/updataName'
import UpdataGener from './components/updataGener'
import Updatabirthday from './components/updatabirthday'
import UpdataPhoto from './components/updataPhoto'
export default {
  name: 'userProfil',
  data() {
    return {
      userList: {},
      showName: false, //显示与隐藏昵称弹层
      showGener: false, //显示与隐藏性别弹层
      showbirthday: false,
      showPhoto: false,
      img: null
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      try {
        const { data } = await getUsersAPI()
        // console.log(data)
        this.userList = data.data
      } catch (err) {
        this.$toast('获取数据失败！')
      }
    },
    onfileChange() {
      // 获取文件对象
      const file = this.$refs.file.files[0]
      // 基于文章对象获取blob数据
      this.img = window.URL.createObjectURL(file)
      // 点击头像弹出弹层
      this.showPhoto = true
      // 相同图片需要清空value
      this.$refs.file.value = ''
    }
  },
  components: {
    UpdataName,
    UpdataGener,
    Updatabirthday,
    UpdataPhoto
  }
}
</script>
<style lang="less" scoped>
.user-profil {
  .avatar {
    width: 60px;
    height: 60px;
  }
}
</style>
